<!DOCTYPE html>
<html lang="en">
<head>
    <title>功能演示</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta ng-include="'head.html'"> -->
    <style type="text/css">
        .view{ height:50%; background-color: #fff }
        .H100{ height: 100% }
        .column{ margin-right: 0px }
        #tb0>tbody>tr>td{ height:24px; line-height: 24px }
        .mapLevel{ cursor: pointer }
        .h4,h4{ font-size: 14px!important;}
    </style>
    <link href="../css/graph-sankey.css" rel="stylesheet" />

    <script src="../lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/build.js" type="text/javascript"></script>
    <script src="../js/public.js" type="text/javascript"></script>

    <link href="../lib/css/bootstrap-glyphicons.css" rel="stylesheet" />
    <link href="../lib/css/styles.css" rel="stylesheet" />

</head>
<body class="flat-blue" ng-app="myApp" ng-controller="myCtrl">
<div class="app-container H100">
    <div class="row content-container H100">
        <div ng-include="'menus.html'" onload="loadReady()"></div>
        <div class="container-fluid H100">
            <div class="side-body H100 padding-top" id="main" style="padding-top: 55px;">
                <!------------------Main---------------->
                <div class="row H100" style="background-color: #eee">
                    <div style="height: 20px; background-color: #fff; margin: 0 15px">
                        <div id="personHead" style="padding: 5px 10px"> 干部画像 </div>
                    </div>
                    <div class="" style="background-color: #fff; margin:0 15px; height: 180px">
                        <div id="baseInfo" style="width: 100%; height: 150px; color:#000; float: left ">
                            <div style="width: 120px; margin: 15px 0px 20px 35px; float: left">
                                <img src="../img/person.jpg" style="width: 100px;">
                            </div>
                            <div style="float: left; width:200px; padding-top: 30px">

                                <h4 style="margin-bottom: 20px; color:#999"> </h4>
                                <p style="font-size: 20px"><span >张帆 (生于1979-3)</span></p>

                                <p><span>现任 </span><span style="color:red; font-size: 18px">雅安市委办公室主任</span></p>
                                <p><span style="color:#000; font-size: 16px">甘肃镇原人，研究生学历</span></p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-8 column H100" style="padding-right: 0px">
                        <!--标题栏-->
                        <div style="width: 100%; height:45px; background-color: #fff; ">
                            <div class="col-md-6" style="padding: 0px">
                                <div style="background-color: #A3C5E8;height: 45px; line-height: 45px; font-size: 16px;">
                                    <b style="padding-left: 40px">基本信息</b>
                                </div>
                            </div>
                            <div class="col-md-6" style="padding: 0px">
                                <div style="background-color: #A3C5E8; margin-left:10px; height: 45px; line-height: 45px; font-size: 16px;">
                                    <b style="padding-left: 40px">多维度评估</b>
                                </div>
                            </div>
                        </div>
                        <div class="view" style="min-height:360px;padding-right: 60px" id="view1">
                            <div class="col-md-6 column H100" id="viewL1">

                            </div>
                            <div class="col-md-6 column H100" id="viewL2"></div>
                        </div>
                        <div class="view" style="min-height:550px; padding-top:50px" id="view2">

                        </div>
                        <!--地图相关-->
                        <div class="view" style="min-height:500px; padding-top:50px" id="view3">
                            <div style="height:20px; position: absolute; z-index: 999; padding:2px">
                                <span class="label label-default point mapLevel">全国</span>
                                <span class="label label-default point mapLevel">四川</span>
                                <span class="label label-default point mapLevel">雅安</span>
                            </div>
                            <div id="view4" class="view H100"></div>
                        </div>

                        <div class="view" style="min-height:650px" id="viewEL">

                        </div>
                    </div>

                    <div class="col-md-4 column" style="margin-left: 0px; padding-left: 0px">
                        <!--标题栏-->
                        <div style="width: 100%; height:45px; background-color: #fff; padding:0 10px;">
                            <div style="background-color: #A3C5E8;height: 45px; line-height: 45px; font-size: 16px;">
                                <b style="margin-left: 40px">个人标签</b>
                            </div>
                        </div>
                        <div class="view" style="min-height:360px" id="viewRT">

                        </div>
                        <div class="view" style="min-height:550px;padding-top: 45px" id="viewRM">

                            <!------------------- 时间轴 ------------------->
                            <ul class="timeline">
                                <li><div class="tldate">2001年4月</div></li>

                                <li>
                                    <div class="tl-circ"></div>
                                    <div class="timeline-panel">
                                        <div class="tl-heading">
                                            <h4>办事员 上察村</h4>
                                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i>4/18/2001</small></p>
                                        </div>
                                        <div class="tl-body">
                                            <p>驻村干部</p>
                                        </div>
                                    </div>
                                </li>

                                <li class="timeline-inverted">
                                    <div class="tl-circ"></div>
                                    <div class="timeline-panel">
                                        <div class="tl-heading">
                                            <h4>乡党委组织委员</h4>
                                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2003</small></p>
                                        </div>
                                        <div class="tl-body">
                                            <p>兼任乡综治办科员</p>
                                        </div>
                                    </div>
                                </li>

                                <li class="timeline-inverted">
                                    <div class="tl-circ"></div>
                                    <div class="timeline-panel">
                                        <div class="tl-heading">
                                            <h4>镇党委书记</h4>
                                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 6/25/2005</small></p>
                                        </div>
                                        <div class="tl-body">
                                            <p>兼任水箐镇镇长</p>
                                        </div>
                                    </div>
                                </li>
                                <li><div class="tldate">2008年8月</div></li>

                                <li>
                                    <div class="tl-circ"></div>
                                    <div class="timeline-panel">
                                        <div class="tl-heading">
                                            <h4>林业局副局长</h4>
                                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/22/2010</small></p>
                                        </div>
                                        <div class="tl-body">
                                            <p>宝兴县</p>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="tl-circ"></div>
                                    <div class="timeline-panel">
                                        <div class="tl-heading">
                                            <h4>区政府研究室副主任</h4>
                                            <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 6/11/2015</small></p>
                                        </div>
                                        <div class="tl-body">
                                            <p>雨城区</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!----------------------------------- End 时间轴 ------------------------------------>



                        </div>
                        <div class="view" style="min-height:500px" id="viewRB">

                        </div>
                        <div class="view" style="min-height:650px" id="viewER">
                            <div id="node" style="color:#000; text-align:center; font-size:14px; font-weight:800;margin-bottom:20px;">
                                个人关系详情
                            </div>
                            <table class="table" id="tb0">
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>姓名</th>
                                    <th>关系类型</th>
                                    <th>时间</th>
                                </tr>
                                </thead>
                                <tbody id="tbody0">
                                <tr>
                                    <td>刘超</td>
                                    <td>张胜</td>
                                    <td>亲属</td>
                                    <td>2012</td>
                                </tr>
                                <tr>
                                    <td>刘超</td>
                                    <td>赵迎春</td>
                                    <td>同事</td>
                                    <td>2012</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!------------------End Main---------------------->
            </div>  <!--End side-body-->
        </div>  <!--End container-fluid-->
    </div>  <!--End content-container-->
    <div ng-include="'footer.html'"></div>
</div>  <!--End app-container-->





<script src="../lib/js/echarts.v4.min.js"></script>
<script src="../js/map/yaan.js"></script>
<script src="../js/map/PSC.js"></script>
<script src="../js/map/CN.js"></script>
<script src="../lib/js/d3.v3.min.js"></script>
<script src="../lib/js/d3.layout.cloud.js"></script>
<script src="../js/wordCloud.js"></script>


<script src="../lib/js/d3.v4.min.js"></script>
<script src="../lib/js/d3.tip.v1.js"></script>
<script src="../js/graph-person.js"></script>




<script language="javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        loadCtlBase($scope);
        // 當前選中人員

        drawBar("viewL1");
        drawRadar("viewL2");

        drawLine("view2");

        loadMapHead();

        drawMapCity("view4");



//        drawMapCity("view5");

//        drawRadar("view2");

    });


    function loadMapHead(){
        $(".mapLevel:last").css("background-color", "#5bc0de");
        $(".mapLevel").on("click", function(){
            var level = $(this).text();
            $(".mapLevel").css("background-color", "#777");
            $(this).css("background-color", "#5bc0de");
            var levels = {"雅安":0, "四川":1, "全国":2};
            cout(levels[level]);
            drawMapCity("view4", levels[level]);
        });
    }

    var __dts = [["id", "男", "青", "共产党", "经济学","5年以下",  "市　长", "张 帆"],
        ["id", "男", "青", "共产党", "经济学","5-10年", "副市长", "颜　超"],
        ["id", "男", "青", "共产党", "管理学","5-10年", "副市长", "杨学宁"],
        ["id", "男", "青", "共产党", "管理学","5-10年", "副市长", "王明华"],
        ["id", "男", "青", "共产党", "法学",  "5-10年", "副市长", "经大忠"],
        ["id", "男", "青", "民进党", "法学", "10-15年", "副市长", "孙福全"],
        ["id", "男", "中", "共产党", "法学", "10-15年", "副市长", "韩圣健"],
        ["id", "女", "中", "共产党", "工学", "10-15年", "副市长", "蒋丽英"],
        ["id", "男", "中", "共产党", "工学", "10-15年", "副市长", "罗宗志"],
        ["id", "男", "中", "共产党", "理学", "15-20年", "副市长", "赵迎春"],
        ["id", "男", "老", "共产党", "历史学", "15-20年", "副市长", "罗　蒙"],
        ["id", "男", "老", "九三学社", "农学", "25年以上", "副市长", "谭 岗"],
        ["id", "男", "中", "共产党", "历史学", "20-25年", "市长助理", "张胜"],
        ["id", "男", "老", "农工党", "农学", "20-25年", "市长助理", "文剑"]
    ];

    var data = getGraphData(__dts);
    drawGraph("viewEL", data);




</script>

</body>
</html>
